# mode

- **Type:** `'production' | 'development' | 'none'`
- **Version:** `>= 1.0.0`

Specify the build mode for Rsbuild, as each mode has different default behavior and optimizations. For example, the `production` mode will minify code by default.

The value of Rsbuild `mode` is also be passed to the [mode](https://rspack.rs/config/mode) configuration of Rspack.

:::tip
The value of `mode` does not affect the loading results of the `.env` file, as the `.env` file is resolved before the Rsbuild configuration file.

Rsbuild CLI supports using the `--env-mode` option to specify the env mode. See ["Env mode"](/guide/advanced/env-vars#env-mode) for more details.
:::

## Default values

The default value of `mode` depends on the `process.env.NODE_ENV` environment variable:

- If `NODE_ENV` is `production`, the default value is `production`.
- If `NODE_ENV` is `development`, the default value is `development`.
- If `NODE_ENV` has any other value, the default value is `none`.

If you set the value of `mode`, the value of `NODE_ENV` will be ignored.

```ts title="rsbuild.config.ts"
export default {
  mode: 'production',
};
```

### Command line

When using Rsbuild's command line:

- `rsbuild dev` will set the default values of `NODE_ENV` and `mode` to `development`.
- `rsbuild build` and `rsbuild preview` will set the default values of `NODE_ENV` and `mode` to `production`.

### JavaScript API

When using Rsbuild's JavaScript API:

- [rsbuild.startDevServer](/api/javascript-api/instance#rsbuildstartdevserver) and [rsbuild.createDevServer](/api/javascript-api/instance#rsbuildcreatedevserver) will set the default values of `NODE_ENV` and `mode` to `development`.
- [rsbuild.build](/api/javascript-api/instance#rsbuildbuild) and [rsbuild.preview](/api/javascript-api/instance#rsbuildpreview) will set the default values of `NODE_ENV` and `mode` to `production`.

## Development mode

If the value of `mode` is `development`:

- Enable HMR and register the [HotModuleReplacementPlugin](https://rspack.rs/plugins/webpack/hot-module-replacement-plugin).
- Generate JavaScript source maps, but do not generate CSS source maps. See [output.sourceMap](/config/output/source-map) for details.
- The `process.env.NODE_ENV` in the source code will be replaced with `'development'`.
- The `import.meta.env.MODE` in the source code will be replaced with `'development'`.
- The `import.meta.env.DEV` in the source code will be replaced with `true`.
- The `import.meta.env.PROD` in the source code will be replaced with `false`.

## Production mode

If the value of `mode` is `production`:

- Enable JavaScript code minification and register the [SwcJsMinimizerRspackPlugin](https://rspack.rs/plugins/rspack/swc-js-minimizer-rspack-plugin).
- Enable CSS code minification and register the [LightningCssMinimizerRspackPlugin](https://rspack.rs/plugins/rspack/lightning-css-minimizer-rspack-plugin).
- Generated JavaScript and CSS filenames will have hash suffixes, see [output.filenameHash](/config/output/filename-hash).
- Generated CSS Modules classnames will be shorter, see [cssModules.localIdentName](/config/output/css-modules#cssmoduleslocalidentname).
- Do not generate JavaScript and CSS source maps, see [output.sourceMap](/config/output/source-map).
- The `process.env.NODE_ENV` in the source code will be replaced with `'production'`.
- The `import.meta.env.MODE` in the source code will be replaced with `'production'`.
- The `import.meta.env.DEV` in the source code will be replaced with `false`.
- The `import.meta.env.PROD` in the source code will be replaced with `true`.

## None mode

If the value of `mode` is `none`:

- Do not enable any optimizations.
- The `process.env.NODE_ENV` in the source code will not be replaced.
- The `import.meta.env.MODE` in the source code will be replaced with `'none'`.
- The `import.meta.env.DEV` in the source code will be replaced with `false`.
- The `import.meta.env.PROD` in the source code will be replaced with `false`.
